<template>
  <div class="simple-draggable-list">
    <!-- 可拖拽的列表 -->
    <draggable
      v-model="items"
      item-key="id"
      class="draggable-list"
      :class="{ 'is-dragging': isDragging }"
      ghost-class="ghost-class"
      chosen-class="chosen-class"
      animation="200"
      handle=".drag-handle"
      @end="onDragEnd"
    >
      <template #item="{ element: item }">
        <div class="list-item">
          <div class="item-content">
            <div class="item-content-left">
              <div class="drag-handle">
                <img src="@/assets/pm/fieldSortDrag.svg" />
              </div>
              <div class="item-name">{{ item.name }}</div>
            </div>
            <el-switch v-model="value1" />
          </div>
        </div>
      </template>
    </draggable>
    <div class="add-field" @click="addField()">
      <el-icon><Plus /></el-icon>
      <span style="margin-top: 3px">新增字段</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  import { Plus } from "@element-plus/icons-vue";
  import draggable from "vuedraggable";

  const emit = defineEmits<{
    addField: () => void;
  }>();

  // 模拟数据
  const items = ref([
    { id: 1, name: "列表项 1" },
    { id: 2, name: "列表项 2" },
    { id: 3, name: "列表项 3" },
    { id: 4, name: "列表项 4" },
    { id: 5, name: "列表项 5" },
  ]);

  const isDragging = ref(false);

  const value1 = ref(false);

  const onDragEnd = () => {
    isDragging.value = false;
  };

  // 新增字段
  const addField = () => {
    emit("addField");
  };
</script>

<style scoped lang="scss">
  .add-field {
    padding: 12px 6px 6px 4px;
    cursor: pointer;
    border-top: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 16px;
  }

  .simple-draggable-list {
    width: 100%;
  }

  .draggable-list {
    width: 100%;
  }

  .list-item {
    display: flex;
    align-items: center;
    padding: 2px 4px;
  }

  .item-content {
    width: 224px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .item-content-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .drag-handle {
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
  }
  .drag-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item-name {
    font-size: 14px;
    color: #1f2329;
  }

  /* 拖拽样式 */
  .draggable-list .ghost-class {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 8px !important;
    padding: 0 !important;
    margin: 0 6px !important;
    background-image: linear-gradient(to right, #1890ff, #1890ff) !important;
    background-size: 100% 1px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
    color: transparent !important;
    min-height: 8px !important;
    max-height: 8px !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .draggable-list .ghost-class::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 6px solid #1890ff !important;
    z-index: 11 !important;
  }

  /* 确保ghost元素内部所有子元素也不显示 */
  .draggable-list .ghost-class * {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .draggable-list .chosen-class {
    opacity: 0.5 !important;
    background-color: #f5f6f7 !important;
    color: #8f959e !important;
  }

  .list-item.dragging .drag-handle,
  .list-item.dragging .item-name {
    opacity: 0.5;
  }
</style>
